<template>
  <div class="container">

    <!-- -----------------------------------------------------------------过滤器一栏---------------------------------- -->
    <div class="filter-container">
      <el-input
        v-model="filterData.name"
        :placeholder="table.name"
        style="width: 200px;"
        class="filter-item"
      />
      <el-select
        v-model="filterData.class"
        :placeholder="table.class"
        clearable
        style="width: 120px"
        class="filter-item"
      >
        <el-option
          v-for="item in options.classOptions"
          :key="item"
          :label="item"
          :value="item"
        />
      </el-select>
      <el-select
        v-model="filterData.submitTime"
        :placeholder="table.submitTime"
        clearable
        style="width: 130px;"
        class="filter-item"
      >
        <el-option
          v-for="item in options.timeOptions"
          :key="item"
          :label="item"
          :value="item"
        />
      </el-select>
      <el-select
        v-model="filterData.correctTime"
        :placeholder="table.correctTime"
        style="width: 140px"
        class="filter-item"
      >
        <el-option
          v-for="item in options.timeOptions"
          :key="item"
          :label="item"
          :value="item"
        />
      </el-select>
      <el-button
        type="primary"
        icon="Search"
        style="margin-left: 80px"
      >
        {{ table.search}}
      </el-button>
    </div>


    <!-- -----------------------------------------------------------------作业管理表格栏---------------------------------- -->
    <div class="table-container">
      <el-table
        :data="HwCorrection"
        border
        fit
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column
          :label="table.number"
          type="index"
          align="center"
          width="80px"
        >
        </el-table-column>
        <el-table-column
          :label="table.name"
          prop="title"
          width="180px"
          align="center"
        >
        </el-table-column>
        <el-table-column
          :label="table.class"
          prop="classgradeName"
          width="180px"
          align="center"
        >
        </el-table-column>
        <el-table-column
          :label="table.submitTime"
          prop="createdTime"
          width="150px"
        >
        </el-table-column>
        <el-table-column
          :label="table.correctTime"
          prop="updatedTime"
          width="100px"
        >
        </el-table-column>
        <el-table-column
          :label="table.state"
          prop="state"
          width="100px"
        >
        </el-table-column>
        <el-table-column
          :label="table.score"
          prop="score"
          width="100px"
        >
        </el-table-column>
        <el-table-column
          :label="table.actions"
          align="center"
          min-width="100px"
        >
          <template #default="scope">
            <el-button
              type="primary"
              size="mini"
              @click="viewDetailedData(scope.row)"
            >
              {{ table.viewHw}}
            </el-button>
            <!-- <el-button
              size="mini"
            >
              {{ table.viewContent }}
            </el-button> -->
          </template>
        </el-table-column>
      </el-table>      
    </div>

    <!-- -----------------------------------------------------------------作业信息对话框---------------------------------- -->
    <el-dialog
      v-model="hwDataVisiable"
      title="作业详情"
      width="70%"
    >
      <el-form :model="this.HwCorrectionDia" label-width="120px">
          <el-form-item :label="table.name" prop="title">
              <el-input type="text" v-model="HwCorrectionDia.title" readonly/>
          </el-form-item>
          <el-form-item :label="table.subjectContent" prop="subjectContent">
              <el-input type="textarea" v-model="HwCorrectionDia.subjectContent" readonly :rows="5"/>
          </el-form-item>
          <el-form-item :label="table.class" prop="classgradeName">
              <el-input type="text" v-model="HwCorrectionDia.classgradeName" readonly/>
          </el-form-item>
          <el-form-item :label="table.hwContent" prop="hwContent">
              <el-input type="textarea" v-model="HwCorrectionDia.hwContent" readonly :rows="5"/>
          </el-form-item>
          <el-form-item :label="table.submitTime" prop="createdTime">
              <el-input type="text" v-model="HwCorrectionDia.createdTime" readonly/>
          </el-form-item>
          <el-form-item :label="table.correctTime" prop="updatedTime">
              <el-input type="text" v-model="HwCorrectionDia.updatedTime" readonly/>
          </el-form-item>
          <el-form-item :label="table.state" prop="state">
              <el-input type="text" v-model="HwCorrectionDia.state" readonly/>
          </el-form-item>
          <el-form-item :label="table.score" prop="score">
              <el-input type="text" v-model="HwCorrectionDia.score" readonly/>
          </el-form-item>
          <el-form-item :label="table.comment" prop="comment">
              <el-input type="textarea" v-model="HwCorrectionDia.comment" readonly :rows="5"/>
          </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="hwDataVisiable = false">Cancel</el-button>
          <el-button type="primary" @click="hwDataVisiable = false"
            >Confirm</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { onMounted, reactive, toRefs } from 'vue'
// import axios from '@/utils/axios'
// import { ElMessage } from 'element-plus'
export default {
  name: 'Good',
  setup() {
    const state = reactive({
      loading: false,
      tableData: [], // 数据列表
      multipleSelection: [], // 选中项
      total: 0, // 总条数
      currentPage: 1, // 当前页
      pageSize: 10 // 分页大小
    })
    const dataMap = reactive({
        filterData: {
            page: 1,
            limit: 10,
            name: '',
            class: '',
            submitTime: "",
            correctTime: ""
        },
        table: {
            number: "序号",
            name: "作业主题",
            class: "所属班级",
            submitTime: "提交时间",
            correctTime: "批改时间",
            state: "批阅状态",
            score: "得分",
            comment: "评语",
            subjectContent: '题目内容',
            hwContent: '作业内容',

            actions: "操作",
            search: "搜索",
            viewHw: "查看作业",
            viewContent: "查看评语"
        },
        options: {
            classOptions: ["小葵花课堂","小菊花课堂","小牡丹课堂"],
            timeOptions: ["今日","一周内","一个月内","一个月前"]
        },
        HwCorrection: [],
        // 作业详细信息对话框
        hwDataVisiable: false,
        HwCorrectionDia: ''
    })
    onMounted(() => {              
    })
    
    return {
      ...toRefs(state),
      ...toRefs(dataMap)
    }
  },
  props: {
      // 传递的参数是对象字典类型
      state: String,
  },
  methods: {
    getData(){
      var _this = this
        // if(this.$route.query.state == "uncorrected") {
        if(this.state == "uncorrected") {
            let formData = new FormData()
            formData.append("state",'未批阅')
            this.$axios
              .post('student/homework/basicinfo',formData)
              .then( response => {
                  let stateCode = response.headers["state"]
                  if(stateCode=="200"){
                  this.HwCorrection = response.data
                  }
                  else if(stateCode==""){
                      // this.$message.success("请求数据异常！")
                  }
                  else{
                      this.$message.error(this.$enum.getDescByValue('STATE', stateCode))
                  }

              })
              .catch(function (error){
                  let stateCode = error.response.headers["state"]                            
                  if(stateCode!=""){
                      _this.$message.error(_this.$enum.getDescByValue('STATE', stateCode))
                  }
                  else{
                      _this.$message.error("后端异常")
                  }
              })
              .then(function (){
                  console.log("测试成功")
              }) 
        }
        else{
          let formData = new FormData()
          formData.append("state",'已批阅')
          this.$axios
              .post('student/homework/basicinfo',formData)
              .then( response => {
                  let stateCode = response.headers["state"]
                  if(stateCode=="200"){
                  this.HwCorrection = response.data
                  }
                  else if(stateCode==""){
                      // this.$message.success("请求数据异常！")
                  }
                  else{
                      this.$message.error(this.$enum.getDescByValue('STATE', stateCode))
                  }

              })
              .catch(function (error){
                  let stateCode = error.response.headers["state"]                            
                  if(stateCode!=""){
                      _this.$message.error(_this.$enum.getDescByValue('STATE', stateCode))
                  }
                  else{
                      _this.$message.error("后端异常")
                  }
              })
              .then(function (){
                  console.log("测试成功")
              }) 
        }
    },
    viewDetailedData(rowData) {
      this.HwCorrectionDia = rowData
      console.log(this.HwCorrectionDia)
      console.log(rowData)
      this.hwDataVisiable = true
    }
    
  },
  mounted() {
    this.getData()
    // console.log(this.$route)
  }
}
</script>

<style scoped>
  .container {
    height: 100%;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    box-sizing: border-box;
  }
  .el-card.is-always-shadow {
    min-height: 100%!important;
  }

  .filter-container {
    height: 5%;
    width: 100%;
    padding: 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    box-sizing: border-box;
  }
  
  .filter-item {
    display: inline-block;
  }

  .table-container {
    height: 95%;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
  }
</style>